/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20230905
* @version:0.0.1
* @type:interface
* @description:
* # SURButton 
* SURButton is a button component that you can freely perform regular attribute operations on
* ## properties
* - in property <image> icon : Button icon
* - in property <length> font-size: button font size
* - in property <length> letter-spacing : button letter spacing
* - in property <bool> font-italic : button font italic
* - in property <int> font-weight: button font weight
* - in property <string> font-family: button font family
* - in-out property <string> content : the content of the button;
* ## functions
* ## callbacks 
* - clicked : run if you click the button
* ============================================
*/


import {SURText} from "../text/index.slint";
import {SURIcon} from "../icon/index.slint";
import {SURCard} from "../card/index.slint";
import {ROOT-STYLES,Themes} from "../../themes/index.slint";
import { HorizontalBox } from "std-widgets.slint";
export component Button inherits SURCard {
  
  card-width: layout.width;
  theme: Light;
  in property <image> icon : @image-url("");
  in property <length> font-size:ROOT-STYLES.sur-font.font-size;
  in property <length> letter-spacing : ROOT-STYLES.sur-font.letter-spacing;
  in property <bool> font-italic:ROOT-STYLES.sur-font.font-italic;
  in property <int> font-weight:ROOT-STYLES.sur-font.font-weight;
  in property <string> font-family:ROOT-STYLES.sur-font.font-family;
  in-out property <string> content : "SURButton";
  
  states [
    light when self.theme == Themes.Light: {
      root.background : toucharea.has-hover?ROOT-STYLES.light-deeper(ROOT-STYLES.sur-theme-colors.light.normal):ROOT-STYLES.sur-theme-colors.light.normal;
      root.border-color : ROOT-STYLES.sur-theme-colors.light.normal;
      root.drop-shadow-color : ROOT-STYLES.sur-theme-colors.light.deepest;
      root.drop-shadow-blur : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.blur:ROOT-STYLES.sur-shadow.low1.blur;
      root.drop-shadow-offset-y : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.y:ROOT-STYLES.sur-shadow.low1.y;
    }
    primary when self.theme == Themes.Primary: {
      root.background : toucharea.has-hover?ROOT-STYLES.primary-deeper(ROOT-STYLES.sur-theme-colors.primary.normal):ROOT-STYLES.sur-theme-colors.primary.normal;
      root.drop-shadow-color: ROOT-STYLES.sur-theme-colors.primary.deepest;
      root.border-color : ROOT-STYLES.sur-theme-colors.primary.normal;
      root.drop-shadow-blur : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.blur:ROOT-STYLES.sur-shadow.low1.blur;
      root.drop-shadow-offset-y : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.y:ROOT-STYLES.sur-shadow.low1.y;
    }
    success when self.theme == Themes.Success: {
      root.background : toucharea.has-hover?ROOT-STYLES.success-deeper(ROOT-STYLES.sur-theme-colors.success.normal):ROOT-STYLES.sur-theme-colors.success.normal;
      root.drop-shadow-color: ROOT-STYLES.sur-theme-colors.success.deepest;
      root.border-color : ROOT-STYLES.sur-theme-colors.success.normal;
      root.drop-shadow-blur : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.blur:ROOT-STYLES.sur-shadow.low1.blur;
      root.drop-shadow-offset-y : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.y:ROOT-STYLES.sur-shadow.low1.y;
    }
    info when self.theme == Themes.Info: {
      root.background : toucharea.has-hover?ROOT-STYLES.info-deeper(ROOT-STYLES.sur-theme-colors.info.normal):ROOT-STYLES.sur-theme-colors.info.normal;
      root.drop-shadow-color: ROOT-STYLES.sur-theme-colors.info.deepest;
      root.border-color : ROOT-STYLES.sur-theme-colors.info.normal;
      root.drop-shadow-blur : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.blur:ROOT-STYLES.sur-shadow.low1.blur;
      root.drop-shadow-offset-y : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.y:ROOT-STYLES.sur-shadow.low1.y;
    }
    warning when self.theme == Themes.Warning: {
      root.background : toucharea.has-hover?ROOT-STYLES.warning-deeper(ROOT-STYLES.sur-theme-colors.warning.normal):ROOT-STYLES.sur-theme-colors.warning.normal;
      root.drop-shadow-color: ROOT-STYLES.sur-theme-colors.warning.deepest;
      root.border-color : ROOT-STYLES.sur-theme-colors.warning.normal;
      root.drop-shadow-blur : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.blur:ROOT-STYLES.sur-shadow.low1.blur;
      root.drop-shadow-offset-y : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.y:ROOT-STYLES.sur-shadow.low1.y;
    }
    error when self.theme == Themes.Error: {
      root.background : toucharea.has-hover?ROOT-STYLES.error-deeper(ROOT-STYLES.sur-theme-colors.error.normal):ROOT-STYLES.sur-theme-colors.error.normal;
      root.drop-shadow-color: ROOT-STYLES.sur-theme-colors.error.deepest;
      root.border-color : ROOT-STYLES.sur-theme-colors.error.normal;
      root.drop-shadow-blur : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.blur:ROOT-STYLES.sur-shadow.low1.blur;
      root.drop-shadow-offset-y : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.y:ROOT-STYLES.sur-shadow.low1.y;
    }
    dark when self.theme == Themes.Dark: {
      root.background : toucharea.has-hover?ROOT-STYLES.dark-deeper(ROOT-STYLES.sur-theme-colors.dark.normal):ROOT-STYLES.sur-theme-colors.dark.normal;
      root.drop-shadow-color: ROOT-STYLES.sur-theme-colors.dark.deepest;
      root.border-color : ROOT-STYLES.sur-theme-colors.dark.normal;
      root.drop-shadow-blur : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.blur:ROOT-STYLES.sur-shadow.low1.blur;
      root.drop-shadow-offset-y : toucharea.has-hover?ROOT-STYLES.sur-shadow.low3.y:ROOT-STYLES.sur-shadow.low1.y;
    }
  ]
  // animation
  animate background {
    duration: ROOT-STYLES.sur-an-duration;
    easing: ROOT-STYLES.sur-an-easing;
  }
  animate height {
    duration: ROOT-STYLES.sur-an-duration;
    easing: ROOT-STYLES.sur-an-easing;
  }
  animate width {
    duration: ROOT-STYLES.sur-an-duration;
    easing: ROOT-STYLES.sur-an-easing;
  }
  animate drop-shadow-blur {
    duration: ROOT-STYLES.sur-an-duration;
    easing: ROOT-STYLES.sur-an-easing;
  }
  animate drop-shadow-offset-y {
    duration: ROOT-STYLES.sur-an-duration;
    easing: ROOT-STYLES.sur-an-easing;
  }
  // //callbacks
  callback clicked();
  toucharea:=TouchArea {
    mouse-cursor: pointer;
    clicked => {
      root.clicked();
    }
    z: 10;
  }
  layout:=HorizontalLayout{
    height: root.height;
    width: txt-container.width + btn-icon.width;
    spacing: btn-icon.visible?ROOT-STYLES.get-space(self.width):0;
    icon-container:= Rectangle {
      btn-icon:= SURIcon {
        height: self.get-icon()?0:root.font-size;
        width: self.get-icon()?0:root.font-size;
        theme:root.theme;
        icon: root.icon;
        visible: self.get-icon()?false:true;
      }
    }
    txt-container:=TouchArea {
      width: btn-txt.width;
      btn-txt:=SURText{
        theme:root.theme;
        content: root.content;
        font-size: root.font-size;
        font-family: root.font-family;
        font-weight: root.font-weight;
        font-italic: root.font-italic;
        letter-spacing: root.letter-spacing;
      }
    }
  }
}